<template>
  <section>
    <div id='model' @click='invitationClose'>
        <div class='model-center'>
            <p>
                邀请码 {{sellerData.inviteCode}}
            </p>
            <div>
                <img :src="sellerData.inviteUrl" width='100%' height='100%'>
            </div>
        </div>
        
    </div>
    <div class='seller-name'>
      {{sellerData.fullName}}
    </div>
    <div class='seller-header' style='position:relative;'>
        <div class='img'>
            <img src="../../../static/img/money.png" height="100%" width="100%" alt="">
        </div>
        <p>
            商户钱包
        </p>
        <h1>
            <span style='font-size:17px;'>
                ￥
            </span>
            <span>
               {{sellerData.price}}
            </span>
        </h1>
    </div>
    <p class='bar'></p>
    <div class='seller-other'>
        <el-row>
            <el-col :span='12' style='border-right:1px solid #c1e2f6;'>
                <div  @click='getMoney(sellerData.price)'>
                    <p class='get-icon'></p>
                    <div class='seller-btn'>提现</div>
                </div>
            </el-col>
            <el-col :span='12'>
                <div @click='invitationOpen'>
                    <p class='invatation-icon'></p>
                    <div class='seller-btn'>邀请</div>
                </div>
            </el-col>
        </el-row>
    </div>
      <div class="footernav active-wrap">
       <el-row>
         <el-col :span="6" class='seller-home'> 
           <div @click="footerEv('index',$event)"> 
             <p class='p1'></p>
             <p class='p2'>商城</p>
           </div>
         </el-col>
         <el-col :span="6" class='seller-order'>
           <div @click="footerEv('order',$event)">
             <p class='p1'></p>
             <p class='p2'>订单</p>
           </div>
         </el-col>
         <el-col :span="6" class='seller-oil'>
           <div @click="footerEv('oil',$event)">
             <p class='p1'></p>
             <p class='p2'>油卡</p>
           </div>
         </el-col>
         <el-col :span="6" class='seller-account'>
           <div @click.stop="footerEv('seller',$event)">
            <p class='p1'></p>
             <p class='p2'>个人</p>
           </div>
         </el-col>
        </el-row>
      </div>
  </section>
</template>
<script>
import {AJAX,URL_SELLER_MONEY,HREF} from '@/comm.js'
export default {
  data(){
    return ({
       sellerData:{},
    })
  },
  created(){
    let This=this;
    AJAX({
      method:'post',
      url:URL_SELLER_MONEY
    },function(data){
      console.log('数据');
      console.log(data);
      if(data.data.retult){
        This.sellerData=data.data.data[0];
      }
    });
  },
  methods:{
    invitationOpen(){
      $('#model').fadeIn(300);
    },
    invitationClose(){
      $('#model').fadeOut(300);
    },
    footerEv(type,ev){
      $('.active-wrap .active').removeClass('active');
      $(ev.target).addClass('active');
      switch(type){
        case 'index':
          window.location.href=HREF+'/mdlist.html';
          console.log('跳转到商城页面');
          break ;
        case 'order':
          window.location.href=HREF+'/seller-order.html';
          console.log('跳转到订单页面');
          break ;
        case 'oil':
          window.location.href=HREF+'/seller-show-oilList.html';
          console.log('跳转到油卡页面');
          break ;
        case 'seller': 
          window.location.href=HREF+'/seller-info.html';
          console.log('跳转到商户页面');
          break ;
      }
    },
    //提现
    getMoney(price){
      this.$router.push({path:'/account-seller.html/getMoney',query:{price:price}});
    },
    getImage( _url ){
      if( _url !== undefined ){
        let _u = _url.substring( 7 );
        return 'https://images.weserv.nl/?url=' + _u;
      }
    }
  }
}
</script>
<style scpoed>
   #model{
      display: none;
      position:absolute;
      top:0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
      background: rgba(0,0,0,0.5);
   }
   #model .model-center{
     height: 400px;
     width: 80%;
     margin: 25% auto;
     border-radius: 20px;
     box-shadow: 0 0 7px white;
   }
   #model .model-center p{
     padding-top: 20px;
     font-size:25px;
     text-align: center;
     color: white;
   }
   #model .model-center div{
     width: 240px;
     height: 240px;
     padding-top: 23px;
     margin:auto;
   }
   .seller-header{
      height: 225px;
      padding-top: 35px;
      text-align: center;
      background: white;
   }
   .seller-header .img{
      height: 100px;
      width: 100px;
      margin:auto;
   }
   .seller-header p{
      padding-top: 20px;
      font-size:16px;
      font-weight: 600;
   }
   .seller-header h1{
      padding-top: 20px;
   }
   .seller-header h1 span{
      font-size:40px;
      font-weight: 700;
   }
   .bar{
      height: 15px;
      background: #f7f7f7;
   }
   .seller-other{
      height: 75px;
      padding-top: 50px;
   }
   .seller-other div{
      height: 100%;
   }
   .seller-other .get-icon{
      background: url('../../../static/img/get-money.png') no-repeat;
   }
   .seller-other .invatation-icon{
      background: url('../../../static/img/seller-invatation.png') no-repeat;
   }
   .seller-other .get-icon,
   .seller-other .invatation-icon{
      height: 30px;
      background-size:auto 100%;
      background-position:center center;  
   }
   .seller-other .seller-btn{
      height: 22px;
      width: 55px;
      margin: 15px auto;
      line-height: 22px;
      text-align: center;
      color: white;
      background: #078cdd;
      box-shadow: 0 0 3px #078cdd;
      border-radius: 15px;
   }
   .seller-name{
      position:absolute;
      top:0;
      z-index:1;
      width: 100%;
      height:30px;
      box-shadow:0 0 3px #d2c8c8;
      text-align: center;
      font-size: 15px;
      font-weight: 600;
      line-height: 30px;
      letter-spacing: 2px;
   }
   .footernav{
      position:fixed;
      bottom: 0;
      width: 100%;
      height: 46px;
      padding:2px;
      background: #f7f7f7;
   }
   .footernav .p1{
       height:28px;
   }
   .footernav .p2{
       height:18px;
       font-size: 12px;
       line-height: 15px;
       text-align: center;
   }
   .seller-home .p1{
       background: url('../../../static/img/user-home.png') no-repeat;
   }
   .seller-order .p1{
       background: url('../../../static/img/user-order.png') no-repeat;
   }
   .seller-oil .p1{
       background: url('../../../static/img/user-oil.png') no-repeat;
   }
   .seller-account .p1{
       background: url('../../../static/img/account.png') no-repeat;
   }
   .seller-home .p1,
   .seller-order .p1,
   .seller-oil .p1,
   .seller-account .p1{
       background-size: auto 70%;
       background-position:center center;  
   }
</style>
